<template>
	<div class="big-container" style="padding: 20px 0;">
		<div class="container-content inner-box">
			<div class="start-layout top-bread">
				<i class="el-icon-location"></i>
				<el-breadcrumb separator-class="el-icon-arrow-right">
					<el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
					<el-breadcrumb-item>详情</el-breadcrumb-item>
				</el-breadcrumb>
			</div>
			<div style="padding-top: 20px;">
				<div class="detail-title">{{info.title}}</div>
				<div class="detail-date">
					发布时间：{{info.releaseTime}}&ensp;&ensp;&ensp;&ensp;文章来源：{{info.releaseUnit?info.releaseUnit:'——'}}
				</div>
				<div class="detail-content" v-html="info.content"></div>
			</div>
		</div>
	</div>
</template>

<script>
	import {
		searchInfo
	} from "@/api/index";
	export default {
		data() {
			return {
				info: {}
			}
		},
		created() {
			searchInfo(this.$route.query.id).then(res => {
				this.info = res.data
			})
		},
		mounted() {
			window.scrollTo(0, 0);
		},
		methods: {

		}
	}
</script>

<style scoped>
	::v-deep .el-icon-location {
		color: #015293 !important;
		font-weight: 400 !important;
		font-size: 22px !important;
		margin-right: 6px;
	}

	::v-deep .el-icon-arrow-right {
		color: #015293 !important;
		font-weight: 400 !important;
		font-size: 18px !important;
	}

	/* 不被选中时的颜色 */
	.el-breadcrumb ::v-deep .el-breadcrumb__inner {
		color: #015293 !important;
		font-weight: 400 !important;
		font-size: 18px !important;
	}
	/* .detail-content {
		word-wrap: break-word;
		overflow-wrap: break-word;
		white-space: pre-wrap;
		word-break: break-word;
		hyphens: auto;
		-webkit-hyphens: auto;
	} */
	
	::v-deep .detail-content * {
		max-width: 100% !important;
		word-wrap: break-word;
		overflow-wrap: break-word;
		/* white-space: pre-wrap !important; */
		box-sizing: border-box !important;
		word-break: break-word;
		hyphens: auto;
		-webkit-hyphens: auto;
	}
	
	::v-deep .detail-content img {
		max-width: 100% !important;
		height: auto !important;
		display: block;
		margin: 10px auto;
		object-fit: contain;
	}
	
	/* 处理表格溢出 */
	::v-deep .detail-content table {
		width: 100% !important;
		border-collapse: collapse;
		overflow-x: auto;
		display: block;
	}
</style>